<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>个人信息修改</title>
		<!-- Bootstrap core CSS -->
		<link href="asserts/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

		<!-- Custom styles for this template -->
		<link href="asserts/css/dashboard.css" rel="stylesheet"th:href="@{css/dashboard.css}">
		<style type="text/css">
			/* Chart.js */
			
			@-webkit-keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			@keyframes chartjs-render-animation {
				from {
					opacity: 0.99
				}
				to {
					opacity: 1
				}
			}
			
			.chartjs-render-monitor {
				-webkit-animation: chartjs-render-animation 0.001s;
				animation: chartjs-render-animation 0.001s;
			}
			#touxiang{
				width: 50px;
				margin-left: 10px;
				margin-right: 10px;
				border-radius: 50%;
			}
			#nicheng{
				width: 100px;
				color: white;
			}
			.touxiang{
				width: 100px;
				border-radius: 30%;
			}
		</style>
	</head>

	<body>
		<div th:replace="~{main :: #top-bar}"></div>

		<div class="container-fluid">
			<div class="row">
				<nav th:replace="main :: #menu" class="col-md-2 d-none d-md-block bg-light sidebar">
				</nav>
				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2>个人资料</h2>
					<img onclick="change" class="touxiang" th:src="@{/img/}+${session.users.touxiang}">
					<a th:href="@{/download_touxiang}">下载头像</a>
					点击头像上传头像
					<br>
					<form th:action="@{/upload}" method="post" enctype="multipart/form-data" onsubmit="return smt()">
						<input type="hidden" name="username" th:value="${session.users.username}">
						<div class="form-group">
							<label>
								昵称：
								<input type="text" class="form-control col-12" name="nickname" th:value="${session.users.nickname}">
							</label>
						</div>
						<div class="form-group">
							<label>
								请输入新密码：
								<input type="password" class="form-control col-12" name="password">
							</label>
						</div>
						<input onchange="showImage(this)" type="file" name="image" id="tx" accept=".jpg,.png,.jpeg,.webp" >
						<button type="submit" class="btn btn-primary">提交</button>
					</form>
				</main>
			</div>
		</div>

		<script >
			function change(){
				//需要触发file的点击事件
				$("#tx").click();
			}
			function showImage(file){
				console.log(file.files[0])
				//需要触发file的点击事件
				var reader = new FileReader();
				reader.readAsDataURL(file.files[0]);
				reader.onload=function (ev1) {
					var urlData = this.result;
					$(".touxiang").attr("src",urlData);
				}
			}

			function smt(){
				if($("input[name='password']").val().trim().length<6){
					//没有编写
					alert("请输入至少6位数的密码")
					return false;
				}
			}
		</script>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/static/js/jquery-3.2.1.slim.min.js}"></script>
		<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/static/js/popper.min.js}"></script>
		<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/static/js/bootstrap.min.js}"></script>

		<!-- Icons -->
		<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/static/js/feather.min.js}"></script>
		<script>
			feather.replace()
		</script>

		<!-- Graphs -->

	</body>

</html>